import QtQuick
import QtQuick.Particles
import GoQt

Item {
    id: root
    property int cell: 30  // 调整格子大小以适应13x13棋盘，应该与Stone.qml中的棋子大小一致
    property var go  // 从main.qml接收GoBoard实例
    width:  cell * go.size
    height: cell * go.size
    property var moves: []
    // 移除了isBlackTurn属性，现在由逻辑层管理

    // 传统木制棋盘背景和边框
    Rectangle {
        width: cell * go.size + 6  // 增加边框宽度*2
        height: cell * go.size + 6  // 增加边框宽度*2
        anchors.centerIn: parent  // 居中对齐
        // 使用木纹图片作为背景
        Image {
            anchors.fill: parent
            source: "qrc:/GoQt/images/wood_texture.svg"  // 木纹图片路径
            fillMode: Image.Tile
        }
        border.color: "#8B4513"  // 深棕色边框
        border.width: 3  // 统一边框宽度
        radius: 8
    }

    Canvas {
        id: grid
        width: cell * go.size
        height: cell * go.size
        anchors.centerIn: parent  // 居中对齐
        onPaint: {
            const ctx = getContext("2d");
            ctx.strokeStyle = "#000000"; 
            ctx.lineWidth = 1.2;
            ctx.lineCap = "round";
            
            // 绘制网格线
            const gridSize = (go.size - 1) * cell;
            
            for (let i = 0; i < go.size; ++i) {
                let p = i * cell;
                ctx.beginPath();
                ctx.moveTo(p, 0); 
                ctx.lineTo(p, gridSize);
                ctx.stroke();
                
                ctx.beginPath();
                ctx.moveTo(0, p); 
                ctx.lineTo(gridSize, p);
                ctx.stroke();
            }
            
            // 绘制天元和星位点
            ctx.fillStyle = "#000000";
            const starPoints = [3, 6, 9]; // 13x13棋盘的星位点
            for (let i = 0; i < starPoints.length; i++) {
                for (let j = 0; j < starPoints.length; j++) {
                    let x = starPoints[i] * cell;
                    let y = starPoints[j] * cell;
                    ctx.beginPath();
                    ctx.arc(x, y, 4, 0, 2 * Math.PI);
                    ctx.fill();
                }
            }
        }
    }

    // 落子效果 - 使用简单的动画替代粒子效果
    Rectangle {
        id: stoneEffect
        width: 20
        height: 20
        radius: 10
        color: go.isBlackTurn ? "#000000" : "#ffffff"
        border.color: "#8B4513"
        border.width: 1
        visible: false
        // 通过 x/y 精确定位效果，不再使用 anchors.centerIn
        z: 100
        transformOrigin: Item.Center
        
        PropertyAnimation {
            id: effectAnimation
            target: stoneEffect
            property: "scale"
            from: 0.5
            to: 2.0
            duration: 500
            easing.type: Easing.OutQuad
            onFinished: stoneEffect.visible = false
        }
        
        PropertyAnimation {
            id: effectOpacity
            target: stoneEffect
            property: "opacity"
            from: 1.0
            to: 0.0
            duration: 500
            easing.type: Easing.OutQuad
        }
        
        function showEffect(x, y, color) {
            if (color !== undefined) {
                stoneEffect.color = color
            }
            // 使用实际网格位置作为偏移，避免计算误差
            stoneEffect.x = x - stoneEffect.width/2 + grid.x
            stoneEffect.y = y - stoneEffect.height/2 + grid.y
            stoneEffect.visible = true
            stoneEffect.scale = 0.5
            stoneEffect.opacity = 1.0
            effectAnimation.start()
            effectOpacity.start()
        }
    }

    // 添加一个覆盖整个棋盘的 MouseArea，用于在空白处落子
    MouseArea {
        width: cell * go.size
        height: cell * go.size
        anchors.centerIn: parent  // 居中对齐
        
        function handleClick(mouse) {
            // MouseArea 已居中且与棋盘同尺寸，直接用局部坐标
            var localX = mouse.x;
            var localY = mouse.y;

            // 四舍五入至最近交点，并做边界钳制
            var col = Math.floor((localX + cell / 2) / cell);
            var row = Math.floor((localY + cell / 2) / cell);
            col = Math.max(0, Math.min(go.size - 1, col));
            row = Math.max(0, Math.min(go.size - 1, row));

            // 记录当前落子颜色用于效果展示（在回合切换之前）
            var placedColor = go.isBlackTurn ? "#000000" : "#ffffff";

            // 尝试落子（逻辑层会切换回合）
            if (go.playStone(row, col)) {
                moves.push(Qt.point(col, row));
                // 触发落子效果，颜色为刚落下的棋子颜色
                stoneEffect.showEffect(col * cell, row * cell, placedColor);
            }
        }
        
        onClicked: (mouse) => handleClick(mouse)
    }

    Repeater {
        model: go.boardData
        delegate: Stone {
            width: cell
            height: cell
            x: (index % go.size) * cell - width/2 + (parent.width - cell * go.size) / 2
            y: Math.floor(index / go.size) * cell - height/2 + (parent.height - cell * go.size) / 2
            stoneColor: modelData
            onStoneClick: {
                // 使用逻辑层管理的回合状态
                var row = Math.floor(index / go.size);
                var col = index % go.size;
                var placedColor = go.isBlackTurn ? "#000000" : "#ffffff";
                if (go.playStone(row, col)) {
                    moves.push(Qt.point(col, row));
                    // 触发落子效果，颜色为刚落下的棋子颜色
                    stoneEffect.showEffect(col * cell, row * cell, placedColor);
                }
            }
        }
    }
}
